<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../plugins/element_UI/index.js"></script>
<!--    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>-->
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/echarts-gl.min.js"></script>
    <script src="../../js/ecStat.min.js"></script>
    <script src="../../js/dataTool.min.js"></script>
    <script src="../../js/china.js"></script>
    <script src="../../js/world.js"></script>
    <script src="../../js/bmap.min.js"></script>
</head>
<body style="height: 100%;margin: 0">
<div id="app">
    <!-- 0 代表全部 1代表自有平台的预约量 2 代表省平台 3 电话预约 4.诊间预约-->
<!--    <el-button type="primary"  @click="privatie">自有客户端平台</el-button>
    <el-button type="primary"  @click="zheJiangSheng">浙江省预约挂号平台</el-button>
    <el-button type="primary"  @click="zhenjian">诊间预约</el-button>
    <el-button type="primary"  @click="dianhua">电话预约</el-button>
    <el-button type="primary"  @click="exportExcel">导出数据表格</el-button>-->
    <el-radio v-model="parmar" label="0" @change="init">全部</el-radio>
    <el-radio v-model="parmar" label="1" @change="zheJiangSheng">浙江省预约挂号平台</el-radio>
    <el-radio v-model="parmar" label="2" @change="privatie">自有客户端平台</el-radio>
    <el-radio v-model="parmar" label="3" @change="zhenjian">诊间预约</el-radio>
    <el-radio v-model="parmar" label="4" @change="dianhua">电话预约</el-radio>
    <el-button type="primary"  @click="exportExcel">导出数据表格</el-button>
</div>
<div id="container" style="height: 100%"></div>

<script type="text/javascript">


    var myChart = echarts.init(document.getElementById('container'));
    var option = {
        legend: {},
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: [
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {type: 'line', smooth: true, seriesLayoutBy: 'row'},
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                }
            }
        ]
    };

    myChart.on('updateAxisPointer', function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            });
        }
    });

    // myChart.setOption(option);
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

     let app1=new Vue({
         el:'#app',
         data(){
             return{
                 so: [],
                 parmar: "0"
             }
         },
        methods: {
            unique(arr) {
                var newArr = [];
                for (var i = 0; i < arr.length; i++) {
                    for (var j = i + 1; j < arr.length; j++) {
                        if (arr[i] == arr[j]) {
                            ++i;
                        }
                    }
                    newArr.push(arr[i]);
                }
                return newArr;
            },
            ma: function () {
                let that = this
                that.loading = false
                axios.post("http://" + window.location.host + '/ordAppointment/selectStatis', this.parmar).then(res => {
                    that.so = res.data.data;
                    //['名字1',1,2,3,4,5,6,7]
                    //医馆编号数组,时间数组
                     var his=new Array();
                     var dates=new Array();
                    for (var i=0;i<that.so.length;i++){
                        his.push(that.so[i].hisID);
                        dates.push(that.so[i].date);
                     }
                     var hisNew = that.unique(his);
                     var datesNew = that.unique(dates);


                    var old2=new Array();
                    old2.push("product");
                    for(var g=0;g<datesNew.length;g++){
                       var date2= datesNew[g].slice(0,7)+"月"
                        old2.push(date2);
                    }
                    option.dataset.source.push(old2);
                    for (var i=0;i<hisNew.length;i++){
                         var old = new Array();
                         if(hisNew[i]=='57170'){
                             old.push('丰潭');
                         }else if (hisNew[i]=='57171'){
                             old.push('凤起');
                         }else if (hisNew[i]=='57172'){
                             old.push('和平');
                         }
                         var num = new Array();
                         for (var k=0;k<that.so.length;k++){
                            for(var j=0;j<dates.length;j++){
                                if (hisNew[i]==that.so[k].hisID&&dates[j]==that.so[k].date){
                                    num.push(that.so[k].num);
                                    old.push(that.so[k].num);
                                    /*old.push(dates[j])*/
                                    break;
                                }
                            }
                         }
                        option.dataset.source.push(old);
                    }
                    myChart.setOption(option);
                }).catch((e) => {
                    alert('未获取到数据')
                })
            },
            ma2 : function (){
                let that = this
                that.loading = false
                axios.post("http://" + window.location.host + '/ordAppointment/priselectStatis', this.parmar).then(res => {
                    that.so = res.data.data;
                    //['名字1',1,2,3,4,5,6,7]
                    //医馆编号数组,时间数组
                    var his=new Array();
                    var dates=new Array();
                    for (var i=0;i<that.so.length;i++){
                        his.push(that.so[i].hisID);
                        dates.push(that.so[i].date);
                    }
                    var hisNew = that.unique(his);
                    var datesNew = that.unique(dates);
                    var old2=new Array();
                    old2.push("product");
                    for(var g=0;g<datesNew.length;g++){
                        old2.push(datesNew[g]);
                    }
                    option.dataset.source.push(old2);
                    for (var i=0;i<hisNew.length;i++){
                        var old = new Array();
                        if(hisNew[i]=='57170'){
                            old.push('丰潭');
                        }else if (hisNew[i]=='57171'){
                            old.push('凤起');
                        }else if (hisNew[i]=='57172'){
                            old.push('和平');
                        }
                        var num = new Array();
                        for (var k=0;k<that.so.length;k++){
                            for(var j=0;j<dates.length;j++){
                                if (hisNew[i]==that.so[k].hisID&&dates[j]==that.so[k].date){
                                    num.push(that.so[k].num);
                                    old.push(that.so[k].num);
                                    /*old.push(dates[j])*/
                                    break;
                                }
                            }
                        }
                        option.dataset.source.push(old);
                    }
                    myChart.setOption(option);
                }).catch((e) => {
                    alert('未获取到数据')
                })
            },
            exportExcel: function () {
                let  that=this;
                that=false;
                    axios.post("http://" + window.location.host + '/ordAppointment/download2',this.parmar).then(res =>{
                        this.$message({
                            type: 'success',
                            message: "导出数据成功！"
                        });
                        let a = document.createElement('a')
                        a.href ="http://" + window.location.host + "/" + res.data.msg;
                        a.click();
                }).catch((e)=>{
                alert("导出数据失败")
                })
            }
        ,
         zheJiangSheng: function (){
             let  that=this;
             that=false;
             this.parmar="1";
             console.log(this.parmar);
             option.dataset.source=[];
             this.ma();
         },
         privatie: function (){
             this.parmar="2";
             console.log(this.parmar);
             option.dataset.source=[];
             this.ma2();
         }, zhenjian: function (){
                this.parmar="3";
                console.log(this.parmar);
                option.dataset.source=[];
                this.ma();
            }, dianhua: function (){
                this.parmar="4";
                console.log(this.parmar);
                option.dataset.source=[];
                this.ma();
            },init: function (){
                this.parmar="0";
                console.log(this.parmar);
                option.dataset.source=[];
                this.ma();
            }
        },
         mounted:function(){
             this.ma();
         }
     })
</script>
</body>
</html>